<template>
    <a-row>
        <a-row class='mytitle'>
            <!-- <router-link :to='{ name: "index" }'><a-icon type="arrow-left"
                    style="color:var(--themeColor);margin-right:0.5em" /></router-link> -->
            {{ $t('告警配置') }}
        </a-row>
        <NoAuthPage v-showNoAuth="'F4-1'" />

        <a-card class="margin">
            <div>
                <div class="title mt-24">{{ $t('告警数量配置') }}</div>
                <div style="width: 700px;" class="mt-22 ml-22">
                    <a-form :form='numform' labelAlign="left">
                        <a-spin :spinning="firloading">
                            <a-form-item v-bind="numformLayout">
                                <a-radio-group v-model:value="checked" @change="handleChangenum">
                                    <a-radio :value=false>{{ $t('限制告警上限') }}</a-radio>
                                    <a-radio :value=true>{{ $t('不限制告警上限') }}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item :label="$t('告警上限数量')" v-bind="numformLayout" v-if="checked == false">
                                <a-input :disabled="isDisabled" style="width: 298px;" v-decorator="['count', {
                                    rules: [
                                        { required: !checked, message: $t('Enter') + $t('告警上限数量') },
                                        { validator: compareToFirstPassword },
                                    ], initialValue: numformData.count
                                }]" :placeholder="$t('Enter') + $t('告警上限数量') + '（' + $t('条') + '）'" />

                            </a-form-item>
                        </a-spin>
                        <a-form-model-item>
                            <a-button class="ml-24" type='primary' @click="handleSubmit">{{ $t('Save') }}</a-button>
                            <a-button class="ml-24" @click="handleClose">{{ $t('Cancel') }}</a-button>
                        </a-form-model-item>
                    </a-form>
                </div>
            </div>

            <div>
                <div class="title mt-24">{{ $t('告警数量配置') }}</div>
                <div style="width: 700px;" class="mt-22 ml-22">

                    <a-form :form='alarmform' labelAlign="left">
                        <a-spin :spinning="secloading">

                            <a-form-item :label="$t('【严重】告警频率')" v-bind="alarmformLayout">
                                <a-input v-decorator="['critical', {
                                    rules: [
                                        { required: true, message: $t('Enter') + $t('【严重】告警频率') },
                                        { validator: validCritical },
                                    ], initialValue: formData.critical
                                }]" :placeholder="$t('Enter') + $t('【严重】告警频率')" addon-after="h" />
                            </a-form-item>
                            <a-form-item :label="$t('【警告】告警频率')" v-bind="alarmformLayout">
                                <a-input v-decorator="['warn', {
                                    rules: [
                                        { required: true, message: $t('Enter') + $t('【警告】告警频率') },
                                        { validator: validWarn },
                                    ], initialValue: formData.warn
                                }]" :placeholder="$t('Enter') + $t('【警告】告警频率')" addon-after="h" />
                            </a-form-item>
                            <a-form-item :label="$t('【提示】告警频率')" v-bind="alarmformLayout">
                                <a-input v-decorator="['report', {
                                    rules: [
                                        { required: true, message: $t('Enter') + $t('【提示】告警频率') },
                                        { validator: validReport },
                                    ], initialValue: formData.report
                                }]" :placeholder="$t('Enter') + $t('【提示】告警频率')" addon-after="h" />
                            </a-form-item>
                        </a-spin>
                        <a-form-model-item>
                            <a-button class="ml-24" type='primary' @click="handleSave">{{ $t('Save') }}</a-button>
                            <a-button class="ml-24" @click="handleCancel">{{ $t('Cancel') }}</a-button>
                        </a-form-model-item>
                    </a-form>
                </div>
            </div>

            <div>
                <div class="title mt-24">{{ 'SNMP Trap ' + $t('告警接入') }}</div>
                <div class="tips border-primary j-border-radius-sm  pt-10 pb-10 pl-10 pr-20 mt-10 tipstyle flex">
                    <Iconfont class="icon pt-4 pr-4 mt-10 mr-4" type="a-16_f_ic_about" style="color: #2d74ff"></Iconfont>
                    <div>
                        <div>{{ $t('SNMP_tips1') }}</div>
                        <div>{{ $t('SNMP_tips2') }}</div>
                    </div>
                </div>

                <div class="mt-14">
                    <div class="mb-14 j-text-dark j-text-bold">{{ $t('Sender-information-list') }}</div>
                    <div>
                        <a-button class="ml-8" :disabled="createSend" type='primary'
                            @click="handleCreateSend(null, 'add')">{{ $t('Add-new') + $t('Sender-information')
                            }}</a-button>
                        <a-button class="ml-12" :disabled="enableSend" type='primary' @click="handleSendSwitch('open', null)">{{
                            $t('Enable') }}</a-button>
                        <a-button class="ml-12" :disabled="disableSend" type='primary' @click="handleSendSwitch('close', null)">{{
                            $t('Disable') }}</a-button>

                    </div>
                    <a-table class="mt-16 mb-48" :rowKey="record => record.id" :columns='sendColumns' :loading="sendTableloading"
                        :rowSelection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }'
                        :dataSource='sendDataList' :locale="defaultSetting" size='small' :pagination="false">
                        
                        <template slot="username" slot-scope="text, record">
                            <span>{{ record.user_name == null ? '-' : '[' + record.user_name + ']' }}</span>
                        </template>

                        <template slot="community" slot-scope="text, record">
                            <span>{{ record.community == null || "" ? '-': record.community}}</span>
                        </template>

                        <template slot="snmp_version" slot-scope="text, record">
                            <span>{{ record.snmp_version === 0 ? 'v1/v2c' : 'v3'}}</span>
                        </template>

                        <template slot="save" slot-scope="text, record">
                            <span>{{ record.protocol_type == 0 ? '-' : saveMap.get(record.protocol_type)}}</span>
                        </template>

                        <template slot="count" slot-scope="text, record">
                           <span v-if="record.auth_type <= 0">-</span>
                           <span v-else>
                            <span>{{ record.countExpanded ? countMap.get(record.auth_type) : record.auth_key }}</span>
                            <Iconfont :class="{ 'icon-look16l-color': !record.countExpanded }"
                                class="icon j-text-second fr pr-10"
                                :type="record.countExpanded ? 'icon-look16l' : 'icon-unlooked16l'"
                                @click="changeViewStatus(record, 'count')"></Iconfont>
                           </span>
                        </template>

                        <template slot="addcount" slot-scope="text, record">
                          <span v-if="record.priv_type <= 0">-</span>
                          <span v-else>  
                            <span>{{ record.addCountExpanded ? addcountMap.get(record.priv_type) : record.priv_key }}</span>
                            <Iconfont :class="{ 'icon-look16l-color': !record.addCountExpanded }"
                                class="icon j-text-second fr pr-10"
                                :type="record.addCountExpanded ? 'icon-look16l' : 'icon-unlooked16l'"
                                @click="changeViewStatus(record, 'addCount')"></Iconfont>
                            </span>
                        </template>

                        <template slot="engine" slot-scope="text, record">
                          <span>{{ record.engine_id == null || "" ? '-': '[' + record.engine_id + ']' }}</span>
                        </template>

                        

                        <template slot="operate" slot-scope='text, record'>
                            <div style="display: flex;" v-userAuth="'H1-2'">
                                <a-switch :checked="record.send_switch == 0 ? false : true" @change="handleSendSwitch('record', record)"></a-switch>
                                <span
                                    :class="record.send_switch != 0 ? 'j-text-second notcursor ml-10' : 'j-text-main cursor-pointer ml-10'"
                                    @click="handleCreateSend(record, 'edit')">{{ $t('Edit') }}</span>
                                <span v-if="record !== sendDataList[0]"
                                    :class="record.send_switch != 0 ? 'j-text-second notcursor ml-10' : 'j-text-red cursor-pointer ml-10'"
                                    @click="handleDelSend(record)">{{ $t('Delete') }}</span>
                            </div>
                        </template>
                    </a-table>
                </div>

                <div class="mt-14">

                    <!-- <a-form :form='publicform' labelAlign="left">
                        <a-spin :spinning="publicloading">
                            <a-form-item :label="$t('团体字')" v-bind="publicLayout">
                                <span v-if="!editVisible">{{ character }}</span>
                                <a-input style="width: 256px;" v-if="editVisible" v-decorator="['number', {
                                    rules: [
                                        { required: true, message: $t('Enter') + $t('团体字') },
                                        { validator: validCharacter },
                                    ], initialValue: publicData.number
                                }]" :placeholder="$t('Enter') + $t('团体字')" />

                                <a-tooltip v-if="!editVisible" placement='top' class="ml-48">
                                    <template slot='title'>
                                        <span>{{ $t('Edit') }}</span>
                                    </template>
                                    <Iconfont class="icon table-operation-icon " type="icon-edit16f"
                                        @click="editVisible = true"></Iconfont>
                                </a-tooltip>

                                <div class="fr">
                                    <span class="j-text-main cursor-pointer" v-if="editVisible"
                                        @click="handleCharacter">{{
                                            $t('Save') }}</span>
                                    <span class="ml-8 j-text-main cursor-pointer" v-if="editVisible"
                                        @click="editVisible = false">{{ $t('Cancel')
                                        }}</span>
                                </div>


                            </a-form-item>
                        </a-spin>
                    </a-form> -->

                    <div class="mb-14 j-text-dark j-text-bold">{{ $t('Receive-host-information-list') }}</div>

                    <a-table class="mt-16 mb-48" rowKey="machine_id" :columns='columns' :loading="tableloading"
                        :dataSource='dataList' :locale="defaultSetting" size='small' :pagination="false">

                        <template slot="ip" slot-scope="text, record">
                            <span>{{ record.ip.join('; ') }}</span>
                        </template>

                        <template slot="status" slot-scope="text, record">
                            <span>{{ statusMap.get(record.status) }}</span>
                        </template>

                        <template slot="operate" slot-scope='text, record'>
                            <div style="display: flex;" v-userAuth="'H1-2'">
                                <span>
                                    <a-switch :checked="record.switch == 0 ? true : false"
                                        @change="handleSwitch(record)"></a-switch>
                                </span>

                            </div>
                        </template>
                    </a-table>
                </div>
            </div>

        </a-card>

        <AppendSend ref="sendRef" @get-list="getSendList" />
        <!-- <DelSend ref="delSendRef" @get-list="getSendList" /> -->

    </a-row>
</template>

<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import configDialog from './alert/configDialog.vue'
import EmptyData from '@/components/common/EmptyData'
import AppendSend from './alermanage/appendSend.vue'
// import DelSend from './alermanage/delSend.vue'

export default {
    name: 'alertmanage',
    components: { NoAuthPage, configDialog, AppendSend },
    data() {
        return {
            // form: this.$form.createForm(this),
            // formstmp: this.$form.createForm(this),
            // formmail: this.$form.createForm(this),
            // formWeChat: this.$form.createForm(this),
            // formSNMP: this.$form.createForm(this),
            // formlayout: {
            //     labelCol: { span: 6 },
            //     wrapperCol: { span: 18 }
            // },
            // formlayout2: {
            //     labelCol: { span: 8 },
            //     wrapperCol: { span: 16 }
            // },
            // value:true,
            edata: [],
            weChatData: [],
            stmpdata: {},
            snmpData: {
                ip: '',
                community: 'public'
            },
            emaildata: [],
            robotdata: {},
            checkedSNMP: false,
            checkedEmail: false,
            checkedWechat: false,
            checkedHook: false,
            warningLevel: [
                { label: '全部等级', value: '全部等级' },
                { label: '提示', value: '提示' },
                { label: '警告', value: '警告' },
                { label: '严重', value: '严重' },
            ],


            alarmform: this.$form.createForm(this),
            alarmformLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 10 }
            },
            formData: {
                critical: '',
                warn: '',
                report: ''
            },

            numform: this.$form.createForm(this),
            numformLayout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 16 }
            },
            numformData: {
                count: ''
            },

            // publicform: this.$form.createForm(this),
            // publicLayout: {
            //     labelCol: { span: 2 },
            //     wrapperCol: { span: 7 }
            // },
            // publicData: {
            //     number: ''
            // },



            checked: false,
            isDisabled: false,
            firloading: false,
            secloading: false,
            // publicloading: false,
            // character: 'public',
            // editVisible: false,
            statusMap: new Map([
                [0, '运行中'],
                [1, '异常'],
                [2, '未启用'],
                [3, '已激活'],
            ]),
            columns: [
                { title: 'Trap' + this.$t('Hostname'), dataIndex: 'name', key: 'name', fixed: 'left' },
                { title: 'Trap' + this.$t('接收') + 'IP', dataIndex: 'ip', key: 'ip', scopedSlots: { customRender: "ip" } },
                { title: this.$t('Service-status'), dataIndex: 'status', key: 'status', scopedSlots: { customRender: "status" } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 280, fixed: 'right' }
            ],

            defaultSetting: { emptyText: <EmptyData /> },
            tableloading: false,
            dataList: [],

            createSend: false,
            enableSend: false,
            disableSend: false,
            selectedRowKeys: [],
            selectedRows: [],
            sendColumns: [
                { title: 'SNMP' + this.$t('Version'), dataIndex: 'snmp_version', key: 'snmp_version', scopedSlots: { customRender: "snmp_version" }, fixed: 'left' },
                { title: this.$t('团体字'), dataIndex: 'community', key: 'community', scopedSlots: { customRender: "community" } },
                { title: 'USM User ' + this.$t('Username'), dataIndex: 'user_name', key: 'user_name', scopedSlots: { customRender: "username" } },
                { title: this.$t('Security-level'), dataIndex: 'protocol_type', key: 'protocol_type', scopedSlots: { customRender: "save" } },
                { title: this.$t('Authentication-Protocols'), dataIndex: 'auth_type', key: 'auth_type', scopedSlots: { customRender: "count" } },
                { title: this.$t('Encryption-protocols'), dataIndex: 'priv_type', key: 'priv_type', scopedSlots: { customRender: "addcount" } },
                { title: this.$t('Engine') + 'ID', dataIndex: 'engine_id', key: 'engine_id', scopedSlots: { customRender: "engine" } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 220, fixed: 'right' }
            ],
            saveMap: new Map([
                [1, 'noAuthNoPriv'],
                [2, 'authNoPriv'],
                [3, 'authPriv']
            ]),
            countMap: new Map([
                [0, '-'],
                [1, 'MD5'],
                [2, 'SHA'],
                [3, 'SHA256'],
                [4, 'SHA384'],
                [5, 'SHA512'],

            ]),
            addcountMap: new Map([
                [0, '-'],
                [1, 'DES'],
                [2, 'AES'],
                [3, 'AES256'],
            ]),
            sendTableloading: false,
            sendDataList: [],

        }
    },
    methods: {
        //获取告警上限数据
        async getAlarmCount() {
            this.firloading = true
            const { data } = await this.$api.alarm.getAlarmCount();
            if (data.mes.count == '-1') {
                this.numformData.count = ''
                this.checked = true
                this.isDisabled = true
            } else {
                this.numformData.count = data.mes.count
            }
            this.firloading = false

        },
        //告警上限限制
        handleChangenum() {
            if (this.checked) {
                this.isDisabled = true
                this.formData.count = ''
                this.form.resetFields(['count']);
            } else {
                this.isDisabled = false
            }
        },
        //获取告警数量频率
        async getAlart() {
            this.secloading = true
            const { data } = await this.$api.alarm.getRate();
            if (data.flag == 0) {
                this.formData.critical = data.mes.critical
                this.formData.report = data.mes.report
                this.formData.warn = data.mes.warn
            }
            this.secloading = false
        },
        //修改告警数量频率
        handleSave() {
            this.alarmform.validateFields(async (err, value) => {
                if (!err) {
                    this.secloading = true
                    const params = {
                        report: Number(value.report),
                        warn: Number(value.warn),
                        critical: Number(value.critical),
                    }
                    const { data } = await this.$api.alarm.modifyAlarmRate(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    this.getAlart()
                    this.secloading = false
                }
            })
        },
        handleCancel() {
            this.alarmform.resetFields()
        },
        //修改告警数量上限
        handleSubmit() {
            // this.isShow = false
            this.numform.validateFields(async (err, value) => {
                if (!err) {
                    this.firloading = true
                    let count = value.count
                    if (this.checked) count = -1
                    const { data } = await this.$api.alarm.modifyAlarmCount({ count })
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    this.getAlarmCount()
                    this.firloading = false
                    this.isShow = false;
                    this.numform.resetFields()
                }
            })
        },
        handleClose() {
            this.numform.resetFields();
        },

        // //获取团体字
        // async getCharacter() {
        //     const { data } = await this.$api.alarm.getCommunityApi()
        //     this.character = data.community
        //     this.publicData.number = data.community
        // },

        // //提交团体字
        // async handleCharacter() {
        //     this.publicform.validateFields(async (err, value) => {
        //         if (!err) {
        //             this.publicloading = true
        //             const { data } = await this.$api.alarm.appendCommunityApi({ community: value.number })
        //             this.model(data.id) //返回模板
        //             this.notice(data.id, data.params, data.flag) //通知列表显示
        //             this.getCharacter()
        //             this.editVisible = false
        //             this.publicloading = false

        //         }
        //     })

        // },
        //获取告警表格
        async getTrapList() {
            this.tableloading = true
            const { data } = await this.$api.alarm.getSnmpAgentApi()
            if (data.flag === 0) {
                this.dataList = data.snmp_agent
            }
            this.tableloading = false

        },

        async handleSwitch(record) {
            if (record.switch == 0) {
                const { data } = await this.$api.alarm.delSnmpAgentApi(record.machine_id)
                this.model(data.id) //返回模板
                this.notice(data.id, data.params, data.flag) //通知列表显示
                this.getTrapList()

            } else if (record.switch == 1) {
                const { data } = await this.$api.alarm.appendSnmpAgentApi({ machine_id: record.machine_id })
                this.model(data.id) //返回模板
                this.notice(data.id, data.params, data.flag) //通知列表显示
                this.getTrapList()

            }
        },

        //获取发送端信息列表
        async getSendList() {
            this.sendTableloading = true
            const { data } = await this.$api.alarm.getSnmpV3Api()
            if (data.flag === 0) this.sendDataList = data.snmp_rec.map(item => ({ ...item, addCountExpanded: true, countExpanded: true })).sort((a, b) => {
                    if (a.snmp_version === 0) return -1;
                    if (b.snmp_version === 0) return 1;
                    return 0;
                }),
            this.sendTableloading = false 
            this.enableSend = false
            this.disableSend = false
            this.createSend = false
        },
        //查看协议内容
        changeViewStatus(record, value) {
            value === 'count' ? record.countExpanded = !record.countExpanded : record.addCountExpanded = !record.addCountExpanded
        },
        //选择的行
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows
            this.createSend = selectedRows.length > 0
            if (selectedRows.length === 0) {
                this.enableSend = false;
                this.disableSend = false;
                return; 
            }
            const switchValue = selectedRows.some(item => item.send_switch !== selectedRows[0].send_switch)
            const allEnable = selectedRows.every(value => value.send_switch === 0)
            const allDisable = selectedRows.every(value => value.send_switch === 1)
            const versionValue = selectedRows.some(item => item.snmp_version !== selectedRows[0].snmp_version)
            if (switchValue || versionValue) {
                this.enableSend = true
                this.disableSend = true
            } else {
                 this.disableSend = allEnable
                 this.enableSend = allDisable
            }
        },
        //新增发送端信息
        handleCreateSend(item, value) {
            if (value === 'add') {
                this.$refs.sendRef.isShow = true
                this.$refs.sendRef.snmpValue = 'v3'
                this.$refs.sendRef.createSend = true
            } else if (value === 'edit' && item.send_switch == 0) {
                item.auth_type == -1 ? item.auth_type = null : item.auth_type
                item.priv_type == -1 ? item.priv_type = null : item.priv_type
                this.$refs.sendRef.isShow = true
                this.$refs.sendRef.createSend = false
                this.$refs.sendRef.snmpValue = item.snmp_version == 1 ? 'v3' : 'v1/v2c'
                this.$refs.sendRef.form = { ...item }
            }
        },
        //snmpv3开启关闭
        async handleSendSwitch(val, item){
            val !== 'record' ? item = this.selectedRows : item
            let params = {}
            if (Array.isArray(item)) {
            params = {
                send_switch: item[0].send_switch == 0 ? 1 : 0,
                infos: item.map(singleItem =>({ id: singleItem.id, snmp_version: singleItem.snmp_version}) )
            }
            } else {
                const filter = item.snmp_version === 1 ? 0 : 1 
                const filterList = this.sendDataList.filter(val => val.snmp_version === filter && val.send_switch === 1 ) 
                if(filterList.length > 0 && item.send_switch == 0) {
			    this.$confirm({
				content: this.$t('SNMP_tips3'),
				// cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
                cancelButtonProps: { style: { display: 'none' } }
            	})
                return
                } 
                else {
                    params = {
                        send_switch: item.send_switch == 0 ? 1 : 0,
                        infos: [{ id: item.id, snmp_version: item.snmp_version }]
                    }
                }
            }
            const { data } = await this.$api.alarm.switchSnmpV3Api(params)
            this.model(data.id) //返回模板
            this.notice(data.id, data.params, data.flag) //通知列表显示
            if(data.flag === 0) this.getSendList()
            this.selectedRowKeys = []
            this.selectedRows = []                    
          
        },
        handleDelSend(item) {
            if (item.send_switch == 0) {
                // this.$refs.delSendRef.isShow = true
                // this.$refs.delSendRef.userid = item.id
                this.$confirm({
					title: this.$t('Delete') + this.$t('Sender-information'),
					content: this.$t('del_sender_info'),
                    cancelText: this.$t('Cancel'),
					okText: this.$t('Sure'),
					okType: 'danger',
					onOk: async() => {
						const { data } = await this.$api.alarm.delSnmpV3Api({ id: item.id })
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                        if (data.flag === 0) {
                            this.getSendList()
                        } 
					}
				})
            }
        },


        validCritical(rule, value, callback) {
            const reg = /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 2) {
                callback(this.$t('配置区间在1-2'));
            } else {
                callback();
            }
        },
        validWarn(rule, value, callback) {
            const reg = /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 168) {
                callback(this.$t('配置区间在1-168'));
            } else {
                callback();
            }
        },
        validReport(rule, value, callback) {
            const reg = /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 168) {
                callback(this.$t('配置区间在1-168'));
            } else {
                callback();
            }
        },

        // validCharacter(rule, value, callback) {
        //     const reg = /^[a-zA-Z0-9\-\_\+\*\/\!\@\#\$\%\^\&\(\)\=\{\}\[\]\;\:\'\"\,\<\.\>\?\|`~]{1,32}$/
        //     if (!reg.test(value)) {
        //         callback(this.$t('1~32个字符，由数字、英文字母和除空格外的特殊字符组成。'))
        //     } else {
        //         callback()
        //     }
        // },

        compareToFirstPassword(rule, value, callback) {
            const reg = /^(0|[1-9][0-9]*)$/
            if (value === '') callback()
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 100000) {
                callback(this.$t('请输入范围在1-100000的数字'));
            } else {
                callback();
            }
        },



    },
    mounted() {
        // this.getstmp()
        // this.getemail()
        // this.getrobot()
        // this.getWechat()
        // this.getFrequency()
        this.getAlarmCount()
        this.getAlart()
        this.getTrapList()
        // this.getCharacter()
        this.getSendList()
    }
}
</script>
<style scoped>
ul {
    padding: 0;
}

ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lab {
    box-shadow: 0px 2px 8px #ccc;
}

.bg {
    /* background-color: rgba(226, 245, 255, 1); */
    margin: 10px;
    padding: 1em;
    /*padding-bottom: 10em;*/
    height: 25em;

}

.zhi {
    line-height: 2.3em;
    margin: 0 0.5em;
    text-align: center;
}

.btn {
    display: flex;
    justify-content: flex-end;
    padding: 0.5em 1em;
}

.list {
    margin-bottom: 1em;
    display: flex;
    justify-content: flex-start;
}

.ant-form-item {
    margin-bottom: 0.8em
}

.label {
    background-color: #f2f2f2;
    width: 100%;
    border-radius: 14px;
}

.addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px;
}

.addr:hover {
    white-space: pre-line;
}

.bottom-right-btn {
    float: right;
    padding: 1em 0;
}

.config-title {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #333333;
    color: #006db8
}

.title {
    border-left: 3px solid #3590eb;
    padding-left: 8px;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
}

.tipstyle {
    background-color: #cad5ff;
    border-color: #8ca3ff;
}

.icon-look16l-color {
    color: #006db8
}

.notcursor {
    cursor: not-allowed
}
</style>
